<template>
	<view class="container">
		<!-- 顶部显示已选择的科目 -->
		<view class="top" @click="openSelector">
			{{ selectedSubject ? `公共课- ${selectedSubject}` : '请选择科目' }}
			<image class="image" src="../../static/image/右下角箭头.png" mode=""></image>
		</view>

		<!-- 科目选择器 -->
		<SubjectSelector :visible="isSelectorVisible" @confirm="handleConfirm" @close="handleClose"></SubjectSelector>

		<!-- 动态显示题型页面 -->
		<view class="container-item">
			<block v-for="(item, index) in questionTypes" :key="index">
				<view class="question-type">
					<text class="title">{{ item.title }}</text>
					<view class="progress">
						<!-- 添加进度条 -->
						<view class="progress-bar-bg">
							<view class="progress-bar-fill"
								:style="{ width: (item.completed / item.total) * 100 + '%' }"></view>
						</view>
						<view class="text">
							<text>{{ item.completed }}/</text>
							<text>{{ item.total }}</text>
							<text>题</text>
						</view>
						<view class="jilu">
							<image class="icon" src="@/static/image/记录.png" mode="aspectFit"></image>
							<text class="record">记录</text>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import SubjectSelector from '@/components/SubjectSelector/SubjectSelector.vue';

	export default {
		components: {
			SubjectSelector,
		},
		data() {
			return {
				selectedSubject: '大学英语', // 当前选中的科目
				isSelectorVisible: false, // 控制 SubjectSelector 的显示状态

				// 不同科目对应的题型数据
				subjectData: {
					'大学英语': [{
							title: '单选题',
							completed: 0,
							total: 77
						},
						{
							title: '翻译题',
							completed: 0,
							total: 23
						},
						{
							title: '阅读理解',
							completed: 0,
							total: 33
						},
						{
							title: '作文题',
							completed: 0,
							total: 28
						},
						{
							title: '完形填空',
							completed: 0,
							total: 90
						},
						{
							title: '选词填空',
							completed: 0,
							total: 47
						},
						{
							title: '英译汉',
							completed: 0,
							total: 40
						},
						{
							title: '汉译英',
							completed: 0,
							total: 9
						},
						{
							title: '短文改错',
							completed: 0,
							total: 9
						},
					],
					'高等数学': [{
							title: '单选题',
							completed: 0,
							total: 200
						},
						{
							title: '填空题',
							completed: 0,
							total: 100
						},
						{
							title: '判断题',
							completed: 0,
							total: 150
						},
						{
							title: '证明题',
							completed: 0,
							total: 50
						},
						{
							title: '解答题',
							completed: 0,
							total: 30
						},
						{
							title: '计算题',
							completed: 0,
							total: 200
						},
					],
					'计算机基础': [
						{
							title: '单选题',
							completed: 0,
							total: 200
						},
						{
							title: '多选题',
							completed: 0,
							total: 190
						},
						{
							title: '填空题',
							completed: 0,
							total: 100
						},
						{
							title: '判断题',
							completed: 0,
							total: 150
						},
						{
							title: '编程题',
							completed: 0,
							total: 100
						},
						{
							title: '选择题',
							completed: 0,
							total: 340
						},
						{
							title: '解答题',
							completed: 0,
							total: 20
						},
						{
							title: '数据库',
							completed: 0,
							total: 7
						},
					],
				},
				questionTypes: [], // 当前显示的题型数据
			};
		},
		watch: {
			// 监听 selectedSubject 的变化，动态更新题型数据
			selectedSubject(newSubject) {
				this.questionTypes = this.subjectData[newSubject] || [];
			},
		},
		methods: {
			openSelector() {
				this.isSelectorVisible = true; // 显示 SubjectSelector
			},
			handleConfirm(selection) {
				this.selectedSubject = selection.subject; // 设置选中的科目
				this.isSelectorVisible = false; // 隐藏弹窗
			},
			handleClose() {
				this.isSelectorVisible = false; // 隐藏 SubjectSelector
			},
			completeQuestion(typeIndex) {
				if (this.questionTypes[typeIndex].completed < this.questionTypes[typeIndex].total) {
					this.questionTypes[typeIndex].completed += 1;
				}
			},
		},
		mounted() {
			// 初始化时加载默认科目的题型数据
			this.questionTypes = this.subjectData[this.selectedSubject] || [];
		},
	};
</script>

<style>
	.container {
		padding: 20px;
		height: 950px;
		/* background: linear-gradient(to top, whitesmoke, lightcyan); */
	}

	.top {
		border-radius: 4px;
		cursor: pointer;
		word-break: break-word;
		/* 自动换行 */
		max-width: 100%;
		/* 限制最大宽度 */
		font-size: 20px;
	}

	.image {
		width: 10px;
		height: 10px;
	}

	.question-type {
		background-color: #fff;
		border-radius: 8px;
		margin-top: 20px;
		padding: 10px;
		line-height: 2.0;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
	}

	.progress {
		display: flex;
		align-items: center;
	}

	.progress-bar-bg {
		width: 20%;
		height: 6px;
		background-color: #f0f0f0;
		border-radius: 3px;
		margin-bottom: 8px;
		/* 和下方文字保持间距 */
	}

	.progress-bar-fill {
		height: 100%;
		background-color: #4CD964;
		/* 绿色进度条 */
		border-radius: 3px;
		transition: width 0.3s ease;
		/* 平滑动画 */
	}

	.icon {
		width: 20px;
		height: 20px;
	}

	.text {
		width: 55px;
		margin-bottom: 8px;
		margin-left: 10px;
	}

	.jilu {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50px;
		margin-left: 50px;
	}
</style>